<template>
  <page-frame>
    <div class="team-bed-main" style="vertical-align: top">
      <div class="toptitle">
        <div class="left" v-model="title">{{title}}</div>
        <div class="right">
          <div class="btns">
            <!--<el-button  class="lightGreenBtn" @click="saveAll">保存</el-button>-->
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="">
        <div class="order-content">
          <div class="container">
            <!--床位管理-->
            <el-row>
              <div>
                <el-row :gutter="20" class="teamBedDetailTitle">
                  <label >床位管理</label>
                  <el-button  class="fRight lightGreenBtn" @click="addBed">新增床位</el-button>
                </el-row>
                <el-table
                  :data="bedTabList"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="blName"
                    label="楼宇"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="flName"
                    label="楼层"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="rmName"
                    label="房间"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="bedNo"
                    label="床位"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="memberName"
                    label="入住会员">
                  </el-table-column>
                  <el-table-column
                    prop="lName"
                    label="护理等级">
                  </el-table-column>
                  <el-table-column
                    prop="dutyPersonString"
                    label="负责人">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                   >
                    <template scope="scope">
                      <el-button type="text" size="small" @click="delBed(scope.row.bedId)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-row>
          </div>
        </div>
      </div>
      <!--新增床位弹框-->
      <div class="bed" v-show="addBedDialog">
        <div style="position:relative;">
          <div class="dialog-title-teambed">
            请选择床位负责人
          </div>
          <div class="input-item item room" style="text-align: left;">
            <label class="belongRoom">所属房间</label>
            <el-cascader
              :options="bedList"
              v-model="bedPos"
            >
            </el-cascader>
          </div>
          <!--<div class="input-item item" style="width:170px;margin-left: 93px;">-->
            <!--请选择组员负责的床位-->
          <!--</div>-->
          <div class="input-item item room-bed">
            <el-card class="box-card" v-for="bed in bedInfo">
              <p style="margin-top:20px;">
                <label class="labelName">会员姓名:</label>
                <span class="name">{{bed.memberName}}</span>
              </p>
              <p>
                <label  class="labelName">照护等级:</label>
                <span class="name">{{bed.lName}}</span>
              </p>
              <p>
                <label  class="labelName">床位编号:</label>
                <span class="name">{{bed.bedNo}}</span>
              </p>
              <p class="principe">
                <label class="labelName">负责人:</label>
                <el-select v-model="bed.emIds" size="mini" multiple placeholder="请选择">
                  <el-option
                    v-for="item in empList"
                    :label="item.emName"
                    :value="item.emId">
                  </el-option>
                </el-select>
              </p>
            </el-card>
          </div>
          <div class="input-item item save">
            <el-button class="lightGreenBtn dialog-confirm-btn" @click="submitDutyPerson">确定</el-button>
          </div>
        </div>
      </div>
      <!--遮罩层-->
      <div class="v-modal" style="z-index:9" v-show="modal" @click="modal=false,addBedDialog=false"></div>
    </div>
  </page-frame>
</template>


<script>
  import commonJs from '../../config/common';
  import teamApi from '../../service/corporation/teamApi';
  export default {
    data() {
      return {
        title:"新增团队-床位",
        modal:false,
        currentTeamId:6,
        principeSelect:[],
        bedPos:[],
        empList: [],
        bedTabList:[
//          {
//          "bedId": 0,
//          "bedNo": "string",
//          "blName": "string",
//          "dutyPersonName": [],
//          "emIdList": [
//            0
//          ],
//          "flName": "string",
//          "lId": 0,
//          "memberId": 0,
//          "memberName": "string",
//          "rmName": "string"
//        }
        ],
        teamQueryResponseDTO: {},
        bedInfo:[],
        addBedDialog:false,
        bedList: [],
//        props: {
//          value: 'blId',
//          label:'blName',
//          children: 'children'
//        },
        dutyPersonList:[
          {
            bedId: 0,
            emId:[],
            tmId: 0
          }
        ]
      }
    },
    methods: {
      init(){
        let self = this;
        self.currentTeamId = self.$route.params.teamId;
       if(this.$route.params.way == 1){//增加
//         self.title = "修改团队-床位";
         self.getTeamByTeam();
        }else if(self.$route.params.way == 2){//修改
          self.title = "修改团队-床位";
         self.getTeamByTeam();
        };
      },
      //获取团队所有信息
      getTeamByTeam(){
        let self = this;
        teamApi.getTeamByTeamId(this.currentTeamId).then(function(response){
          self.bedTabList  =response.body.data.bedList;
          self.empList =response.body.data.empList;
          self.teamQueryResponseDTO =response.body.data.teamQueryResponseDTO;
          if(self.bedTabList){
            for(var i=0;i<self.bedTabList.length;i++){
              self.bedTabList[i].dutyPersonString = self.bedTabList[i].dutyPersonName.join(" , ");
            }
          }
        },function () {})
      },
      //获取房间级联选择器下拉菜单
      getBedList(){
        let self = this;
        teamApi.getStructureBedroomTree().then(function (response) {
          self.bedList =response.body.data;
          self.changeBedList();
        })
      },
      //查询床位信息
      queryBedInfo(roomId){
        let self = this;
        teamApi.getAddBedVoByBedId(roomId,self.currentTeamId).then(function (respones) {
          self.bedInfo = respones.body.data;
          console.debug(self.bedInfo);
        },function () {})
      },
      //添加或修改床位
      addBed(){
        let self = this;
        self.addBedDialog = true;
        self.modal = true;
        self.getBedList();
      },
      //bedlist格式转化
      changeBedList(){
        let self = this;
        if(self.bedList.length!==0){
          for(var i=0;i<self.bedList.length;i++) {
            self.bedList[i].label = self.bedList[i].blName;
            self.bedList[i].value = self.bedList[i].blId;
            // building foreach
            var floors = self.bedList[i].children;
            if(floors.length !== 0){
              for(var j=0;j<floors.length;j++){
                // floor foreach
                floors[j].label = floors[j].flName;
                floors[j].value = floors[j].flId;
                delete floors[j].blId;
                var rooms = floors[j].children;
                if(rooms.length !== 0) {
                  for(var k=0;k<rooms.length;k++){
                    // room foreach
                    rooms[k].label = rooms[k].rmName;
                    rooms[k].value = rooms[k].rmId;
                    delete rooms[k].flId;
                  }
                }else{
                  delete floors[j].children;
                }
              }
            }else{
              delete self.bedList[i].children;
            }
          }}
      },
      //提交新建/修改床位负责人
      submitDutyPerson(){
        let self = this;
        if(self.bedInfo.length > 0){
          for(var k=0;k<self.bedInfo.length;k++){
            self.bedInfo[k].tmId = self.currentTeamId;
            delete self.bedInfo[k].emNames;
          };
        };
        teamApi.editTeamInsertBedInfo(self.bedInfo).then(function () {
          self. getTeamByTeam();
          self.modal = false;
          self.addBedDialog = false;
        },function () {
          self.$message({
            type: 'error',
            message: '添加负责人失败!'
          });
        })

//        if(this.$route.params.way == 1){//增加
//          for(var k=0;k<self.bedInfo.length;k++){
//            self.bedInfo[k].tmId = self.currentTeamId;
//          }
//          teamApi.editTeamInsertBedInfo(self.bedInfo).then(function () {
//            self. getTeamByTeam();
//            self.modal = false;
//            self.addBedDialog = false;
//          })
//        }else if(self.$route.params.way == 2){//修改
//              //这里是修改负责提交的结论   后端暂未提供
//          for(var k=0;k<self.bedInfo.length;k++){
//            self.bedInfo[k].tmId = self.currentTeamId;
//          }
//          teamApi.editTeamInsertBedInfo(self.bedInfo).then(function () {
//            self. getTeamByTeam();
//            self.modal = false;
//            self.addBedDialog = false;
//          })
//        };
      },
      //删除床位
      delBed(bedId){
        let self = this;
        self.$confirm('确定删除该床位信息', '删除床位', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teamApi.editTeamDeleteBedInfo(bedId,self.currentTeamId).then(function(response){
            if(response.status ==200){
              self.$message({
                type: 'success',
                message: '删除成功!'
              });
              self.getTeamByTeam();
            }
          },function () {
            console.debug("删除床位失败")
          });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //返回函数
      back(){
        if(this.$route.params.way==2){//编辑时返回
          this.$router.push({name: 'team',params: { no: 5 }});
        }else{//其他
          this.$router.push({name: 'team',params: {no: 5 }});
        }
      },
      //全部保存
      handleIconClick(ev) {
        console.log(ev);
      },
      saveAll(){
        this.$message({
          message: '已保存您全部修改以及新增的内容',
          type: 'success'
        });
        this.$router.push({name:"team",params: { no: 5 }});
      },
    },
    watch:{
      bedPos:{
        handler(curVal){
          let currentRoomId = curVal[curVal.length-1];
          this. queryBedInfo(currentRoomId);
        },
        deep:true
      }
    },
    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .team-bed-main .title{
    font-size: 28px;
    color: #111111;
    margin: 30px 50px 30px 50px;
    font-weight:bolder;
    padding-left: 15px;
    border-left: 5px solid #0cb7c6;
  }
  .team-bed-main .nameItem{

  }
  .team-bed-main .nameItem div{

  }
  .team-bed-main .btns{
    float: right;
  }
  .team-bed-main .container .input-item{
    /*margin-bottom: 20px;*/
    margin-top: 15px;
  }
  .team-bed-main .container input{
    display: inline-block;
  }
  .team-bed-main .dialog-confirm-btn{

  }
  /*.scroll{*/
    /*height: calc(100vh - 122px);*/
  /*}*/
  .teamBedDetailTitle{
    padding-left:10px;
    padding-right:10px;
    margin-top:10px;
    height:50px;
    line-height:50px;
  }
  .team-bed-main .bed{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%);
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
    background-color:#fff;
    width:1200px;
    height:500px;
    margin-top:-300px;
    border-radius:5px;
    z-index:10;
    overflow: auto;
  }
  .team-bed-main .bed .item{
    margin-top:10px;
  }
  .team-bed-main .bed .room-bed{
    width: 1000px;
    margin: 0 auto;
  }
  .team-bed-main .bed .item .belongRoom,.bed .item.principe{
    margin-right:10px;
    margin-left:100px;
  }
  .team-bed-main .bed .item.principe{
    margin-top:10px;
    margin-bottom:10px;
  }
  .team-bed-main .bed .box-card{
    width:310px;
    height:200px;
    display:inline-block;
    margin-right:10px;
    margin-left:10px;
    margin-top:15px;
    color:#000;
  }
  .team-bed-main .bed .box-card p{
    margin-top:10px;
    text-align: left!important;
  }
  .team-bed-main .bed .box-card .labelName{
    width:73px;
    display:inline-block;
    text-align:right;
  }
  .team-bed-main .bed .box-card  .name{
    display:inline-block;
    width:82px!important;
  }
  .team-bed-main .bed .box-card .el-select{
    width:180px!important;
  }
  .team-bed-main .bed .save{
    margin:15px 93px;
    text-align: center;
  }
  .team-bed-main .el-cascader{
    width: auto;
  }
  .team-bed-main .room .el-input{
    width: 120%!important;
  }
</style>
